<template>
  <div class="cart_container w">
    <el-table
      :data="$store.state.carList"
      style="width: 100%"
      @selection-change="change"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="product_name" label="商品名称" width="180">
      </el-table-column>
      <el-table-column prop="product_selling_price" label="单价">
      </el-table-column>
      <el-table-column prop="num" label="数量">
        <template slot-scope="scope">
          <el-input-number
            v-model="scope.row.num"
            @change="pedometer"
            :min="0"
            label="描述文字"
            size="small"
          ></el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="" label="小计">
        <template slot-scope="scope">
          <div>
            {{ scope.row.num * scope.row.product_price }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作">
        <template slot-scope="scope">
          <button @click="remove(scope.row.product_id)" class="button">
            ✖
          </button>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer_container w">
      <div class="left_container">
        <ul>
          <li>继续购物 |</li>
          <li>
            共<span>{{ allength }}</span
            >件商品
          </li>
          <li>
            已选择<span>{{ obj.selLength }}</span
            >件
          </li>
        </ul>
      </div>
      <div class="right_container">
        <p class="aa">合计:</p>
        <p>
          <b>{{ obj.sum }}</b
          >元
        </p>
        <p class="js_box"><button class="js">去结算</button></p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selList: [],
    };
  },
  methods: {
    pedometer() {
      this.$store.commit("pedometer");
    },
    remove(id) {
      this.$store.commit("remove", id);
    },
    change(val) {
      this.selList = val;
    },
  },
  computed: {
    allength() {
      var length = 0;
      this.$store.state.carList.forEach((item) => {
        length += item.num;
      });
      return length;
    },
    obj() {
      let sum = 0;
      let selLength = 0;
      this.selList.forEach((item) => {
        sum += item.num * item.product_price;
        selLength += item.num;
      });
      return { sum, selLength };

    },
  },
};
</script>
<style lang="scss">
.w {
  width: 1200px;
  margin: 0 auto;
}
.cart_container {
  //   height: 500px;
  background-color: #f4f4f4;
}
.button {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: black;
  color: #fff;
  outline: none;
}
.footer_container {
  height: 50px;
  background-color: #f4f4f4;
  margin-top: 20px;
  display: inline-flex;
  justify-content: space-between;
}
.left_container {
  width: 30%;
  height: 100%;
  //   background-color: green;
  ul {
    width: 100%;
    height: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    li {
      width: 30%;
      height: 50%;
      span {
        color: red;
      }
    }
  }
}
.right_container {
  width: 20%;
  height: 100%;
  //   background-color: red;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  p {
    color: orange;
  }
  .aa {
    font-size: 10px;
  }
}
.js_box {
  margin-left: 28px;
}
.js {
  width: 120px;
  height: 50px;
  background-color: #ff6700;
  border: none;
  outline: none;
  cursor: pointer;
  color: #ffff;
}
</style>